Aloha！又是我少女人妻 Uerica～！中秋節快到拉！大家都準備好烤肉吃月餅了嗎，小時候我爸都會買冰淇淋月餅！好吃又好肥，現在長大什麼都不敢吃了呢～ 嫦娥也是這樣才飛起來的嗎Q__Q

經過前三天的 Search UI 的 Components 使用教學，大家都有架起自己的搜尋頁面了嗎！但其實還不夠，一個好用的搜尋頁面還有很多的細節可以處理呢！

還記得昨天提到 SearchProvider 中有很多Components 嗎：

• SearchBox
• Results
• PagingInfo
• ResultsPerPage
• Paging
• Facet
• Sorting

每個 Components 也都有很多對應的屬性可以用喔，就讓我們一個個來嘗試看看吧～

SearchBox

SearchBox就是搜尋框的部分，在搜尋框中輸入查詢字詞，按查詢後觸發一次資料搜尋。

placeholder 輸入提示

未輸入字詞時可見的輸入提示

<SearchBox inputProps={{ placeholder: "嗨,來找我阿" }} />

autocompleteSuggestions 自動完成建議

在搜尋框輸入字詞會出現字詞建議，且建議字詞會根據字符開頭順序來建議 ( 輸入 " a " 僅出現開頭是 " a " 的建議字詞 )， " Suggestions "與 " Results " 不同之處在於 Suggestions 點擊建議字詞會跳出搜尋資料

點擊後

autocompleteResults 自動完成結果

自動搜尋結果是指使用者輸入欲搜尋字詞，搜尋框下面會出現建議字詞的選單，但這裡的字詞選單僅是你輸入的字符來建議 ( 例如輸入 " a " 會跳出所有字串有 " a " 的建議字詞 ) ，點擊後會直接連到網頁結果，這就是為什麼要輸入 URL 拉～

< SearchBox 
  autocompleteResults = { { 
     titleField: "name",
     urlField: "image_url" 
  } } 
/>

會像下圖這樣，不過點擊建議字詞是直接連到其他網站

autocompleteSuggestions + autocompleteResults 自動完成建議與自動完成結果一起使用

剛剛有說到 Suggestions 是出現搜尋建議，比較像我們一般用的autocomplete，如果使用者沒有直接鍵出完整的 titleField 的資料就會跳到 Suggestions 直接給予建議，如果完整的 titleField 的資料則直接連到該筆資料的網站

<SearchBox 
	autocompleteResults={{
	sectionTitle: "點擊後直接連到結果網站",
	titleField: "name",
	urlField: "image_url"
	}}
	autocompleteSuggestions={{
	sectionTitle: "點擊後出現該字詞搜尋結果"
	}}
/>

搜尋欄下方的建議字詞有兩個區塊，區快名稱可以自己改，總之一個是搜尋該字詞，一個是直接連到結果網站～

autocompleteSuggestions 與 autocompleteResults 細節定義

我們可以在 configurationOptions 的地方修改細節，例如 Results 的字詞可以被 highlighting ，以及 Suggestions 的字詞出現筆數，或是設定 autocomplete 哪個欄位

const configurationOptions = {
  apiConnector: connector,
  autocompleteQuery: {
    //autocompleteResults
    results: {
      result_fields: {
        //可以使用 snippet , 建議字詞會被 highlighting
        name: { snippet: { size: 20, fallback: true } },
        image_url: { raw: {} }
      }
    },
	//autocompleteSuggestions
    suggestions: {
      types: {
        documents: {
          //建議字詞出現的欄位
          fields: ["name"]
        }
      },
      //建議筆數
      size: 5
    }
  },
  ...
};

好拉，今天就先到這邊，感謝各位閱讀，明天見瞜掰掰！